<template>
	<div ref="chartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

interface Props {
	chartData: any[];
}

const props = defineProps<Props>();
const chartRef = ref<HTMLElement>();
let chart: echarts.ECharts | null = null;

const renderChart = () => {
	if (!chartRef.value || !props.chartData || props.chartData.length === 0) return;

	// 获取今天的日期
	const today = new Date().toISOString().slice(0, 10);

	// 格式化日期为 MM-DD
	const days = props.chartData.map((d: any) => {
		const date = new Date(d.date);
		const mm = String(date.getMonth() + 1).padStart(2, '0');
		const dd = String(date.getDate()).padStart(2, '0');
		return `${mm}-${dd}`;
	});
	const planEnd = props.chartData.map((d: any) => d.planEnd || 0);
	// 过滤实际完工数据：只显示今天及之前的数据，今天之后的数据设为 null
	const actualEnd = props.chartData.map((d: any) => {
		return d.date <= today ? (d.actualEnd || 0) : null;
	});

	if (chart) chart.dispose();

	chart = echarts.init(chartRef.value);
	chart.setOption({
		title: { 
			text: '完工累计', 
			left: 'center',
			textStyle: {
				fontSize: 16,
				fontWeight: 'bold',
				color: '#333'
			}
		},
		tooltip: { 
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			},
			formatter: function(params: any) {
				let result = params[0].axisValue + '<br/>';
				params.forEach((param: any) => {
					result += param.marker + param.seriesName + ': ' + param.value + '<br/>';
				});
				return result;
			}
		},
		legend: { 
			data: ['计划完工', '实际完工'],
			top: 30,
			textStyle: {
				fontSize: 12
			}
		},
		grid: { 
			left: 60, 
			right: 40, 
			top: 80, 
			bottom: 60, 
			containLabel: true 
		},
		xAxis: {
			type: 'category',
			data: days,
			axisLabel: {
				rotate: 45,
				interval: 0,
				fontSize: 11,
				color: '#666',
				margin: 8
			},
			axisLine: {
				lineStyle: {
					color: '#ddd'
				}
			},
			axisTick: {
				show: false
			}
		},
		yAxis: { 
			type: 'value',
			axisLabel: {
				fontSize: 11,
				color: '#666'
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: '#f0f0f0',
					type: 'dashed'
				}
			}
		},
		series: [
			{
				name: '计划完工',
				type: 'line',
				data: planEnd,
				smooth: true,
				symbol: 'circle',
				symbolSize: 6,
				lineStyle: {
					width: 3,
					color: '#fac858'
				},
				itemStyle: {
					color: '#fac858',
					borderWidth: 2,
					borderColor: '#fff'
				},
				z: 2,
				label: {
					show: true,
					position: 'top',
					color: '#fac858',
					fontWeight: 'bold',
					fontSize: 11,
					formatter: function(params: any) {
						return params.value > 0 ? params.value : '';
					}
				},
			},
			{
				name: '实际完工',
				type: 'line',
				data: actualEnd,
				smooth: true,
				symbol: 'circle',
				symbolSize: 6,
				lineStyle: {
					width: 3,
					color: '#ee6666'
				},
				itemStyle: {
					color: '#ee6666',
					borderWidth: 2,
					borderColor: '#fff'
				},
				z: 2,
				label: {
					show: true,
					position: 'top',
					color: '#ee6666',
					fontWeight: 'bold',
					fontSize: 11,
					formatter: function(params: any) {
						return params.value > 0 ? params.value : '';
					}
				},
			},
			{
				name: '计划完工(柱)',
				type: 'bar',
				data: planEnd,
				barGap: '10%',
				barWidth: '60%',
				z: 1,
				itemStyle: {
					color: 'rgba(250, 200, 88, 0.3)',
					borderRadius: [2, 2, 0, 0]
				},
				label: {
					show: false
				}
			}, 
			{
				name: '实际完工(柱)',
				type: 'bar',
				data: actualEnd,
				barGap: '10%',
				barWidth: '60%',
				z: 1,
				itemStyle: {
					color: 'rgba(238, 102, 102, 0.3)',
					borderRadius: [2, 2, 0, 0]
				},
				label: {
					show: false
				}
			}, 
		],
	});
	chart.resize();
};

// 监听数据变化
watch(() => props.chartData, () => {
	nextTick(() => {
		renderChart();
	});
}, { deep: true });

// 监听窗口变化自适应
const resizeChart = () => {
	if (chart) chart.resize();
};

onMounted(() => {
	renderChart();
	window.addEventListener('resize', resizeChart);
});

onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart);
	if (chart) chart.dispose();
});
</script>

<style scoped>
.chart-container {
	width: 100%;
	height: 100%;
	min-height: 350px;
}
</style> 